<template>
  <!-- 搜索 -->

  <div class="lineitem">
    <van-row style="display: flex;">
      <van-col class="lineitem_img">
        <img class="logo" src="@/assets/images/logo.png" />
      </van-col>
      <van-col>
        <van-search class="" placeholder="搜索商品, 共145674款好物" />
      </van-col>
      <van-col>
        <van-button class="login" plain type="danger" size="mini">登录</van-button>
      </van-col>
      <div>
        hello world
      </div>
    </van-row>
  </div>


  <!-- 导航条 -->
  <van-tabs>
    <van-tab title="推荐"></van-tab>
    <van-tab title="居家生活"></van-tab>
    <van-tab title="服饰鞋包"></van-tab>
    <van-tab title="美食美酒"></van-tab>
    <van-tab title="个性清护"></van-tab>
    <van-tab title="母婴亲子"></van-tab>
  </van-tabs>

  <!-- 轮播图 -->
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item class="swiper_container">
      <img src="@/assets/home/bannerImg.webp" />
    </van-swipe-item>
    <van-swipe-item class="swiper_container">
      <img src="@/assets/home/bannerImg.webp" />
    </van-swipe-item>
    <van-swipe-item class="swiper_container">
      <img src="@/assets/home/bannerImg.webp" />
    </van-swipe-item>
    <van-swipe-item class="swiper_container">
      <img src="@/assets/home/bannerImg.webp" />
    </van-swipe-item>
  </van-swipe>

  <!-- icon+文本 -->
  <div class="container">
    <ul class="g-grow">
      <li class="item">
        <a>
          <i class="u-icon u-icon-index-servicePolicy special-icon"
            style="background-image: url(&quot;https://yanxuan.nosdn.127.net/a03dd909803b9ac032eba58b7253a2f6.png&quot;);"></i>
          <span class="text">网易自营品牌</span>
        </a>
      </li>
      <li class="item">
        <a>
          <i class="u-icon u-icon-index-servicePolicy special-icon"
            style="background-image: url(&quot;https://yanxuan.nosdn.127.net/a03dd909803b9ac032eba58b7253a2f6.png&quot;);"></i>
          <span class="text">30天无忧退货</span>
        </a>
      </li>
      <li class="item">
        <a>
          <i class="u-icon u-icon-index-servicePolicy special-icon"
            style="background-image: url(&quot;https://yanxuan.nosdn.127.net/a03dd909803b9ac032eba58b7253a2f6.png&quot;);"></i>
          <span class="text">48小时快速退款</span>
        </a>
      </li>
    </ul>
  </div>

  <!-- Grid 宫格 -->
  <van-grid :column-num="5">
    <van-grid-item>
      <van-image class="image" src="https://yanxuan.nosdn.127.net/c6fd8835a6400b7da7a016ad85506b69.png" />
      <div class="txt">新品首发</div>
    </van-grid-item>
    <van-grid-item>
      <van-image class="image" src="https://yanxuan.nosdn.127.net/fede8b110c502ec5799702d5ec824792.png" />
      <div class="txt">居家生活</div>
    </van-grid-item>
    <van-grid-item>
      <van-image class="image" src="https://yanxuan.nosdn.127.net/896a3beac514ae8f40aafe028e5fec56.png" />
      <div class="txt">服饰鞋包</div>
    </van-grid-item>
    <van-grid-item>
      <van-image class="image" src="https://yanxuan.nosdn.127.net/37520d1204a0c55474021b43dac2a69e.png" />
      <div class="txt">美食酒水</div>
    </van-grid-item>
    <van-grid-item>
      <van-image class="image" src="https://yanxuan.nosdn.127.net/6c3bd9d885c818b1f73e497335a68b47.png" />
      <div class="txt">个护清洁</div>
    </van-grid-item>
    <van-grid-item>
      <van-image class="image" src="https://yanxuan.nosdn.127.net/559d2a240ec20b096590a902217009ff.png" />
      <div class="txt">母婴亲子</div>
    </van-grid-item>
    <van-grid-item>
      <van-image class="image" src="https://yanxuan.nosdn.127.net/5c088559ebcc3f0ffcda663f04dfbeb2.png" />
      <div class="txt">运动旅行</div>
    </van-grid-item>
    <van-grid-item>
      <van-image class="image" src="https://yanxuan.nosdn.127.net/fbca8e1f2948f0c09fc7672c2c125384.png" />
      <div class="txt">数码家电</div>
    </van-grid-item>
    <van-grid-item>
      <van-image class="image" src="https://yanxuan.nosdn.127.net/static-union/1642506913355bb9.png" />
      <div class="txt">宠物生活</div>
    </van-grid-item>
    <van-grid-item>
      <van-image class="image" src="https://yanxuan.nosdn.127.net/static-union/16644541382b06e4.png" />
      <div class="txt">每日抄底</div>
    </van-grid-item>
  </van-grid>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
.lineitem {
  box-sizing: border-box;
  padding: 0 10px;

  .lineitem_img {
    width: 70px;
    height: 20px;
    position: relative;
    top: 18px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

// 搜索
.header {
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
  box-sizing: border-box;

  a {
    width: 70px;
    height: 20px;
    background-image: url("../../assets/images/logo.png");
    background-size: cover;
  }

  .search {
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 28px;
    border: none;
    font-size: 14px;
    border-radius: 3px;
    background-color: #ededed;

    span {
      color: #666;
      margin-left: 5px;
    }
  }

  .login {
    font-size: 12px;
    color: red;
    border: 1px solid red;
    border-radius: 5px;
    background-color: white;
  }
}

// 轮播图
.my-swipe {
  width: 375px;

  .van-swipe__track {
    width: 375px;

    .swiper_container {
      width: 100%;
      height: 185px;

      img {
        height: 100%;
        width: 100%;
      }
    }
  }

}


// icon+text
.container {
  background: #fff;

  .g-grow {
    width: 100%;
    height: 36px;
    padding: 0 15px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    zoom: 1;
  }

  .item {
    flex: 1;
    float: left;

    .special-icon {
      background-size: 100% 100%;
      background-position: 50%;
    }

    .u-icon-index-servicePolicy {
      width: 16px;
      height: 16px;
      display: inline-block;
      vertical-align: middle;
    }
  }

  .text {
    font-size: 12px;
    color: #333;
    margin-left: 4px;
    line-height: 16px;
    display: inline-block;
    vertical-align: middle;
    zoom: 1;
  }

}

// 宫格
.image {
  width: 55px;
  height: 55px;
}

.txt {
  margin-top: 5px;
  font-size: 12px;
  text-align: center;
  line-height: 18px;
  white-space: nowrap;
}
</style>